<template>
  <div class="container">
    <h3>vue+openlayers: 使用marker-feature来添加marker</h3>
    <div id="vue-openlayers"></div>
  </div>
</template>

<script>
import 'ol/ol.css';
import { Map, View } from 'ol';
import Tile from 'ol/layer/Tile';
import XYZ from 'ol/source/XYZ';
import VectorLayer from 'ol/layer/Vector'; // 矢量图层
import VectorSource from 'ol/source/Vector'; // 矢量数据源
import Marker from 'ol-marker-feature'
import Popup from 'ol-popup'
export default {
  data() {
    return {
      map: null
    }
  },
  mounted() {
    this.initMap();
  },
  methods: {
    initMap() {
      let layer = new Tile({
        source: new XYZ({
          url: 'http://wprd0{1-4}.is.autonavi.com/appmaptile?x={x}&y={y}&z={z}&lang=zh_cn&size=1&scl=1&style=7'
        })
      })
      this.map = new Map({
        target: 'vue-openlayers',
        layers: [layer],
        view: new View({
          center: [116.397411, 39.909186],
          zoom: 7,
          projection: 'EPSG:4326'
        })
      })
      const marker = new Marker([116.397411, 39.909186])
      marker.set('info', '<div style="background: #fff; padding: 20px"><h3>我是标题</h3><h4>我是内容</h4></div>')
      marker.setMap(this.map)
      const popup = new Popup({
        offset: [0, -55],
      })
      this.map.addOverlay(popup)
      marker.on('click', function () {
        popup.show(marker.getLocation(), marker.get('info')) // 显示弹窗 getLocation()获取marker的位置 get('info')获取marker的info
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.container {
    width: 840px;
    height: 550px;
    margin: 50px auto;
    border: 1px solid #ccc;
    #vue-openlayers {
      width: 800px;
      height: 420px;
      margin: 0 auto;
      border: 1px solid #42b983;
      position: relative;
    }
  }
</style>
